<template>
  <div class="content-div">
    <div class="set-div">
      <img src="../../../../assets/images/icon-sz.png" @click="$router.push('/settingWaiter')" alt="">
    </div>
    <div class="person-card">
      <div class="head-box">
        <img :src="userInfo.head_sculpture ? userInfo.head_sculpture : default_head" alt="">
        <span>{{userInfo.nickname}}</span>
      </div>
      <div class="name-card">
        <div class="name-title">陪诊师:
          <span v-if="userInfo.is_qualification == '0'" style="color:red;">  未认证</span>
          <img class="wid30" v-else-if="userInfo.is_qualification == '1'" src="../../../../assets/images/已认证.png" alt="">
        </div>
        <div class="info-title flex1">
          <div class="person-info" @click="$router.push('/user-waiter')">个人资料</div>
        </div>
      </div>
      <div class="age-title mt5">护龄：{{userInfo.nurse_age}}</div>
      <div class="introduce-title mt5">{{userInfo.brief_introduction}}</div>
    </div>
    <div class="model-box flex">
      <div class="w25p" v-for="(item, index) in modelList" v-bind:key="index" @click="$router.push(item.router)">
        <img class="img46" :src="item.img" alt="">
        <div class="model-box-title">{{item.name}}</div>
      </div>
    </div>
    <!-- <div class="mk-box">
      <div class="mk-item" @click="toPage('/patientList')">
        <img src="@/assets/images/mk-jzr.png" alt="" srcset="">
        <div>
          <span>就诊人</span>
          <span>{{medicalNum}}</span>
        </div>
      </div>
    </div> -->
    <div class="gn-box">
      <div @click="toPage(item.router)" class="gn-item" v-for="(item, index) in gnList" :key="index">
        <div>
          <img :src="item.img" alt="">
          <span>{{item.name}}</span>
        </div>
        <van-icon color="#999999" name="arrow" />
      </div>
    </div>
  </div>
</template>
<script>
import { selectMedicalVisitorList } from '@/api/medical.js'
import { selectAccompanyingPhysician } from '@/api/medicalWaiter.js'
export default {
  name: 'index',
  data () {
    return {
      default_head: require('@/assets/images/default-head.jpg'),
      userInfo: {},
      gnList: [
        // { name: '提现明细', img: require('@/assets/images/提现明细.png'), router: '/withdrawalList' },
        { name: '联系客服', img: 'http://diagnosisdl.lngov.top/webhdfs/v1/medical/banner/images/轮播图片1704184903784_9141113779.png?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0', router: 'callPhone' },
        { name: '我的消息', img: 'http://diagnosisdl.lngov.top/webhdfs/v1/medical/banner/images/轮播图片1704184930245_9713816092.png?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0', router: '/mineMsg' },
        { name: '我的地址', img: 'http://diagnosisdl.lngov.top/webhdfs/v1/medical/banner/images/轮播图片1704184972812_4374431837.png?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0', router: '/city' },
        { name: '接单助手', img: 'http://diagnosisdl.lngov.top/webhdfs/v1/medical/banner/images/轮播图片1704185905417_4618697591.png?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0', router: '/orderAssistant' },
        // { name: '暂停接单申请', img: require('@/assets/images/暂停接单申请.png'), router: '/breakOrder' },
        { name: '关于我们', img: 'http://diagnosisdl.lngov.top/webhdfs/v1/medical/banner/images/轮播图片1704185029024_9834980872.png?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0', router: '/aboutUs' }
      ],
      modelList: [
        { name: '我的认证', img: 'http://diagnosisdl.lngov.top/webhdfs/v1/medical/banner/images/轮播图片1704184762290_5324135258.png?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0', router: '/physicianAuthentication' },
        { name: '服务设置', img: 'http://diagnosisdl.lngov.top/webhdfs/v1/medical/banner/images/轮播图片1704184783857_5046976039.png?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0', router: '/serviceSettings' },
        { name: '资格证书', img: 'http://diagnosisdl.lngov.top/webhdfs/v1/medical/banner/images/轮播图片1704184809415_0819061285.png?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0', router: '/qualification' },
        { name: '体检报告', img: 'http://diagnosisdl.lngov.top/webhdfs/v1/medical/banner/images/轮播图片1704184830886_6192239106.png?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0', router: '/medicalReport' }
      ],
      medicalNum: 0,
      accompanying_physician_id: ''
    }
  },
  created () {},
  computed: {

  },
  methods: {
    toPage (url) {
      if (url == 'callPhone') {
        window.location.href = `tel:${this.userInfo.phone}`
        return
      }
      this.$router.push(url)
    },
    getPersonList () {
      selectMedicalVisitorList({
        member_id: this.$store.state.user.token
      }).then(res => {
        if (res.data.errcode === 0) {
          this.medicalNum = res.data.data.length
        }
      })
    },
    getPhysicianInfo (accompanying_physician_id) {
      selectAccompanyingPhysician({ accompanying_physician_id: accompanying_physician_id }).then(res => {
        if (res.data.errcode === 0) {
          this.userInfo = res.data.data
          this.userInfo.brief_introduction = this.userInfo.brief_introduction ? this.userInfo.brief_introduction : '请设置简介'
          return
        }
        Toast.fail(res.data.errmsg)
      })
    }
  },
  mounted () {
    // this.getPersonList() // 暂时注释掉了，接口报错了
    // this.userInfo = this.$store.state.user.severUserInfo
    this.accompanying_physician_id = this.$store.state.user.severUserInfo.accompanying_physician_id
    this.getPhysicianInfo(this.accompanying_physician_id)
    console.log(this.userInfo)
  }
}
</script>

<style scoped lang="less">
  .content-div{
    padding: 0px 10px 0px 10px;
    font-size: 12px;
    background-color: #FFFFFF;
    min-height: 100%;
    background-image: url('../../../../assets/images/bg.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    .flex {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .flex1 {
      display: flex;
      justify-content: flex-end;
      flex-direction: row;
      // align-items: center;
    }
    .set-div {
      height: 44px;
      line-height: 44px;
      justify-content: flex-end;
      display: flex;
      flex-direction: row;
      align-items: center;
      img {
        width: 30px;
        height: 30px;
      }
    }
    .person-card {
      padding: 10px;
      background-color: #fff;
      box-shadow: 0 0 2px 2px rgba(0,0,0,.07);
      border-radius: 10px;
      height: auto;
      position: relative;
      margin-top: 50px;
      .name-card {
        height: 43px;
        display: flex;
        .name-title {
          width: 70%;
          padding-top: 20px;
          line-height: 23px;
          display: flex;
          align-items: center;
        }
        .info-title {
          width: 30%;
          .person-info {
            border: solid 1px #edeae6;
            color: #999;
            border-radius: 50px;
            height: 26px;
            padding: 0px 9px;
            line-height: 1;
            align-items: center;
            display: flex;
            flex-direction: row;
            font-family: PingFangSC;
          }
        }
        .age-title {
          height: 18px;
          line-height: 18px;
        }
        .introduce-title {
          height: 17px;
          line-height: 17px;
        }
      }
    }
    .model-box {
      padding: 7px 0px 10px 0px;
      height: 75px;
      box-shadow: 0 0 2px 2px rgba(0,0,0,.07);
      margin-top: 10px;
      border-radius: 10px;
      .model-box-title {
        height: 20px;
        margin-top: 8px;
        text-align: center;
        color: #232323;
        font-size: 14px;
        font-family: PingFangSC;
      }
    }
    .head-box{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;
      padding: 10px;
      font-weight: bold;
      position: absolute;
      top: -50px;
      img{
        width: 54px;
        height: 54px;
        border-radius: 50%;
        margin-right: 10px;
        border: 4px solid #FFFFFF;
      }
    }
    .mk-box{
      width: 300px;
      margin-left: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .mk-item{
        width: 100%;
        position: relative;
        background-color: #FFFFFF;
        border-radius: 6px;
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
        padding: 10px;
        img{
          width: 34px;
          height: 34px;
          margin-right: 10px;
          vertical-align: middle;
        }
        div{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          height: 34px;
          width: 100%;
          box-sizing: border-box;
          span:first-child{
            font-size: 12px;
          }
          span:last-child{
            font-size: 14px;
            font-weight: bold;
          }
        }
      }
    }
    .gn-box{
      box-sizing: border-box;
      padding: 10px;
      .gn-item{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        border-bottom: 1px solid #E8E8E8;
        box-sizing: border-box;
        padding: 10px 4px;
        div{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          font-size: 12px;
          img{
            width: 20px;
            height: 20px;
            margin-right: 6px;
          }
        }
      }
    }
    .mt5 {
      margin-top: 5px;
    }
    .w25p {
      width: 25%;
      height: 100%;
      text-align: center;
    }
    .img46 {
      width: 46px;
      height: 46px;
    }
    .wid30 {
      width: 30%;
    }
  }
</style>
